<template>
    <div class="container" v-cloak>
        <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
        <div class="dataInfo">
            <div class="selectStudent font12" :class="{'hasStudent':studentName}" flex="main:justify cross:center"
                 @click="showStudent">
                <div class="opacity5 font12" v-if="!studentId" flex-box="0">选择学员</div>
                <div class="studentWrapper" v-if="studentId">
                    <img :src="studentImg+'?imageView2/0/w/68/format/jpeg'">
                </div>
                <div class="studentName" v-text="studentName" v-if="studentId" flex-box="1"></div>
                <div class="rightIcon" flex-box="0"></div>
            </div>
            <div class="bottomLine"></div>
            <div class="selectStudent hasStudent font12" style="paddingTop:0.19rem" flex="main:justify cross:center">
                <input class="font12 title" placeholder="请输入标题" flex-box="1" maxlength="20" v-model="title">
                <div class="opacity5 font10 uploadNum" flex-box="0"><span v-text="title.length"></span>/20</div>
            </div>
            <div class="bottomLine"></div>
            <div class="selectStudent font12 hasStudent" flex="main:justify cross:center"
                 @click="getDatePicker(0,0,beginTime*1000,true,1)">
                <div class="opacity5 font12" flex-box="0">开始时间</div>
                <div class="studentName" v-text="new Date(beginTime*1000).Format('M月d日')" flex-box="1"
                     flex="main:right"></div>
                <div class="rightIcon" flex-box="0"></div>
            </div>
            <div class="bottomLine"></div>
            <div class="selectStudent font12 hasStudent" flex="main:justify cross:center"
                 @click="getDatePicker(beginTime*1000,0,new Date(`${new Date(endTime*1000).getFullYear()}/${new Date(endTime*1000).getMonth()+1}/${new Date(endTime*1000).getDate()} 00:00:00`).getTime(),false,1)">
                <div class="opacity5 font12" flex-box="0">结束时间</div>
                <div class="studentName" v-text="new Date(endTime*1000).Format('M月d日')" flex-box="1"
                     flex="main:right"></div>
                <div class="rightIcon" flex-box="0"></div>
            </div>
            <div class="bottomLine"></div>
            <div class="titleP font13">本阶段表现</div>
            <div class="addArea">
                <textarea placeholder="请输入本阶段表现" ref="textarea" maxlength="2000" v-model="firstContent"></textarea>
                <ul class="imgList" flex="cross:center" v-if="(firstArr.length)>0">
                    <li class="imgItem" flex-box="0" v-for="(pic,index) in firstArr" @click="showPicesSwiper(firstArr,index)">
                        <img :src="pic.datathumbnail" v-if="pic.datatype==1">
                        <img :src="pic.datathumbnail" v-if="pic.datatype==3">
                        <div class="play" v-if="pic.datatype==3"></div>
                        <div class="audioWrapper" v-if="pic.datatype==2">
                            <img src="../../images/audioBg.png"/>
                            <div class="audioTime" flex="main:center cross:center">
                                <span v-text="pic.datatime>=60?parseInt(pic.datatime/60):0" flex-box="0"></span>
                                <span flex-box="0">:</span>
                                <span v-text="parseInt(pic.datatime%60)>=10?parseInt(pic.datatime%60):'0'+parseInt(pic.datatime%60)"
                                      flex-box="0"></span>
                            </div>
                        </div>
                        <div class="deleteBtn" v-if="canUploadClick"
                             @click.stop="removeItem(pic.id,index,firstArr)"></div>
                    </li>
                </ul>
                <div class="btnArea" flex="main:justify cross:center">
                    <div class="leftArea" flex-box="0" flex="cross:bottom">
                        <div flex-box="0" class="leftAreaInner">
                            <div  class="imgBtn" @click="changeFile('album',1)"></div>
                            <div class="leftAreaFont opacity5" flex="main:center cross:center">相册</div>
                        </div>
                        <div flex-box="0" class="leftAreaInner">
                            <div  class="videoBtn" @click="changeFile('video',1)"></div>
                            <div class="leftAreaFont opacity5" flex="main:center cross:center">拍摄</div>
                        </div>
                        <div flex-box="0" class="leftAreaInner">
                            <div  class="audioBtn" @click="changeFile('audio',1)"></div>
                            <div class="leftAreaFont opacity5" flex="main:center cross:center">语音</div>
                        </div>
                    </div>
                    <div class="rightArea font10 uploadNum" flex-box="0"><span v-text="firstContent.length"></span>/2000
                    </div>
                </div>
            </div>
            <div class="bottomLine"></div>
            <div class="starArea" flex="cross:center">
                <div class="titleP font13" flex-box="0">本阶段评分</div>
                <ul class="starList" flex-box="0" flex>
                    <li class="starItem" :class="{'starItemed':startIndex<startIndexed+1}"
                        @click="changeStar(startIndex)" v-for="(starItem,startIndex) in starList" flex-box="0"></li>
                </ul>
            </div>
            <div class="blackBorder"></div>
            <div class="titleP font13" style="padding-bottom: 0.04rem">下阶段目标</div>
            <ul class="goalList">
                <li class="goalItem font12" :class="{'goalContentCheck':targetItem.checked}"
                    v-for="(targetItem,targetIndex) in targetList" flex="main:center cross:center"
                    @click="setTargetCheck(targetIndex)">
                    <div class="goalContent" v-text="targetItem.tagName"></div>
                    <div class="delGoal" @click.stop="delTarget(targetItem.tid,targetIndex)"
                         v-if="targetItem.tid>0"></div>
                </li>
                <li class="addGoal" @click="openTarget(true,false)"></li>
            </ul>
            <div class="selectStudent font12 hasStudent" flex="main:justify cross:center"
                 @click="getDatePicker(endTime*1000,0,nextBeginTime*1000,true,2)">
                <div class="opacity5 font12" flex-box="0">开始时间</div>
                <div class="studentName" v-text="new Date(nextBeginTime*1000).Format('M月d日')" flex-box="1"
                     flex="main:right"></div>
                <div class="rightIcon" flex-box="0"></div>
            </div>
            <div class="bottomLine"></div>
            <div class="selectStudent font12 hasStudent" flex="main:justify cross:center"
                 @click="getDatePicker(nextBeginTime*1000,0,new Date(`${new Date(nextEndTime*1000).getFullYear()}/${new Date(nextEndTime*1000).getMonth()+1}/${new Date(nextEndTime*1000).getDate()} 00:00:00`).getTime(),false,2)">
                <div class="opacity5 font12" flex-box="0">结束时间</div>
                <div class="studentName" v-text="new Date(nextEndTime*1000).Format('M月d日')" flex-box="1"
                     flex="main:right"></div>
                <div class="rightIcon" flex-box="0"></div>
            </div>
            <div class="bottomLine"></div>
            <div class="titleP font13">下阶段实施计划</div>
            <div class="addArea">
                <textarea placeholder="请输入下阶段计划" ref="textarea" maxlength="2000" v-model="secondContent"></textarea>
                <ul class="imgList" flex="cross:center" v-if="(secondArr.length)>0">
                    <li class="imgItem" flex-box="0" v-for="(pic,index) in secondArr" @click="showPicesSwiper(secondArr,index)">
                        <img :src="pic.datathumbnail" v-if="pic.datatype==1">
                        <img :src="pic.datathumbnail" v-if="pic.datatype==3">
                        <div class="play" v-if="pic.datatype==3"></div>
                        <div class="audioWrapper" v-if="pic.datatype==2">
                            <img src="../../images/audioBg.png"/>
                            <div class="audioTime" flex="main:center cross:center">
                                <span v-text="pic.datatime>=60?parseInt(pic.datatime/60):0" flex-box="0"></span>
                                <span flex-box="0">:</span>
                                <span v-text="parseInt(pic.datatime%60)>=10?parseInt(pic.datatime%60):'0'+parseInt(pic.datatime%60)"
                                      flex-box="0"></span>
                            </div>
                        </div>
                        <div class="deleteBtn" v-if="canUploadClick"
                             @click.stop="removeItem(pic.id,index,secondArr)"></div>
                    </li>
                </ul>
                <div class="btnArea" flex="main:justify cross:center">
                    <div class="leftArea" flex-box="0" flex="cross:bottom">
                        <div flex-box="0" class="leftAreaInner">
                            <div  class="imgBtn" @click="changeFile('album',2)"></div>
                            <div class="leftAreaFont opacity5" flex="main:center cross:center">相册</div>
                        </div>
                        <div flex-box="0" class="leftAreaInner">
                            <div  class="videoBtn" @click="changeFile('video',2)"></div>
                            <div class="leftAreaFont opacity5" flex="main:center cross:center">拍摄</div>
                        </div>
                        <div flex-box="0" class="leftAreaInner">
                            <div  class="audioBtn" @click="changeFile('audio',2)"></div>
                            <div class="leftAreaFont opacity5" flex="main:center cross:center">语音</div>
                        </div>
                    </div>
                    <div class="rightArea font10 uploadNum" flex-box="0"><span v-text="secondContent.length"></span>/2000
                    </div>
                </div>
            </div>
            <div class="blackBorder"></div>
            <div class="titleP font13">给家长建议</div>
            <div class="addArea">
                <textarea placeholder="请输入给家长建议" ref="textarea" maxlength="2000" v-model="thirdContent"></textarea>
                <ul class="imgList" flex="cross:center" v-if="(thirdArr.length)>0">
                    <li class="imgItem" flex-box="0" v-for="(pic,index) in thirdArr" @click="showPicesSwiper(thirdArr,index)">
                        <img :src="pic.datathumbnail" v-if="pic.datatype==1">
                        <img :src="pic.datathumbnail" v-if="pic.datatype==3">
                        <div class="play" v-if="pic.datatype==3"></div>
                        <div class="audioWrapper" v-if="pic.datatype==2">
                            <img src="../../images/audioBg.png"/>
                            <div class="audioTime" flex="main:center cross:center">
                                <span v-text="pic.datatime>=60?parseInt(pic.datatime/60):0" flex-box="0"></span>
                                <span flex-box="0">:</span>
                                <span v-text="parseInt(pic.datatime%60)>=10?parseInt(pic.datatime%60):'0'+parseInt(pic.datatime%60)"
                                      flex-box="0"></span>
                            </div>
                        </div>
                        <div class="deleteBtn" v-if="canUploadClick"
                             @click.stop="removeItem(pic.id,index,thirdArr)"></div>
                    </li>
                </ul>
                <div class="btnArea" flex="main:justify cross:center">
                    <div class="leftArea" flex-box="0" flex="cross:bottom">
                        <div flex-box="0" class="leftAreaInner">
                            <div  class="imgBtn" @click="changeFile('album',3)"></div>
                            <div class="leftAreaFont opacity5" flex="main:center cross:center">相册</div>
                        </div>
                        <div flex-box="0" class="leftAreaInner">
                            <div  class="videoBtn" @click="changeFile('video',3)"></div>
                            <div class="leftAreaFont opacity5" flex="main:center cross:center">拍摄</div>
                        </div>
                        <div flex-box="0" class="leftAreaInner">
                            <div  class="audioBtn" @click="changeFile('audio',3)"></div>
                            <div class="leftAreaFont opacity5" flex="main:center cross:center">语音</div>
                        </div>
                    </div>
                    <div class="rightArea font10 uploadNum" flex-box="0"><span v-text="thirdContent.length"></span>/2000
                    </div>
                </div>
            </div>
        </div>
        <div class="targetArea" v-if="targetArea">
            <div class="targetWrapper">
                <div class="closeBtn" @click="openTarget(false,false)"></div>
                <div flex="main:center cross:center">
                    <div class="titleP font13">添加标签</div>
                </div>
                <div class="font10 opacity5 targetName">标签名称</div>
                <input type="text" class="targetInput font12" maxlength="10" placeholder="请输入标签名称" v-model="targetName">
                <div class="targetLine"></div>
                <div flex="main:right cross:center" class="targetFont">
                    <div class="font10 opacity5"><span v-text="targetName.length"></span>/10</div>
                </div>
                <div class="targetBtn font13" flex="main:center cross:center" @click="openTarget(false,true)">确定</div>
            </div>
        </div>
        <student-list ref="studentList" :classId="classId" :appCode="'APP_GROWTH_NOTE'" :radio="true" :title="'成长手记'"
                      @addStudent="addStudent"></student-list>
        <div class="allSendBtn" flex="main:center cross:center" @click="sendGrowth">发送</div>
        <div class="uploadWrapper" v-if="!canUploadClick"></div>
    </div>
</template>
<script type="text/babel">
    import API from '../../../api/api.js'
    import {domain, imagedomain} from '../../../api/api.js'
    import addModel from '../../../components/addModel.vue'
    import studentList from '../../../components/studentList.vue'
    const api = new API();
    export default{
        data(){
            return {
                title:new Date().Format('M月d日') +' 成长手记',
                //手记标题
                id: 0,
                //添加附加的id（删除时使用）
                startIndexed: 'noStar',
                //评价星级（noStar代表无星级）
                firstContent: '',
                //本阶段表现
                secondContent: '',
                //下阶段计划
                thirdContent: '',
                //给家长建议
                starList: [1, 2, 3, 4, 5],
                //星级个数
                uploadList: [],
                //附件总列表
                classId: this.$route.query.classId ? this.$route.query.classId : '',
                //班级id
                beginTime: new Date(`${new Date().getFullYear()}/${new Date().getMonth() + 1}/${new Date().getDate()} 00:00:00`).getTime() / 1000,
                //本阶段开始时间
                endTime: new Date(`${new Date().getFullYear()}/${new Date().getMonth() + 1}/${new Date().getDate()} 23:59:59`).getTime() / 1000,
                //本阶段结束时间
                nextBeginTime: new Date(`${new Date(new Date().getTime()+86400000).getFullYear()}/${new Date(new Date().getTime()+86400000).getMonth() + 1}/${new Date(new Date().getTime()+86400000).getDate()} 00:00:00`).getTime() / 1000,
                //下阶段开始时间
                nextEndTime: new Date(`${new Date(new Date().getTime()+86400000).getFullYear()}/${new Date(new Date().getTime()+86400000).getMonth() + 1}/${new Date(new Date().getTime()+86400000).getDate()} 23:59:59`).getTime() / 1000,
                //下阶段结束时间
                domain: domain,
                //域名
                imgKeys: [],
                //作业附件客户端传递的key
                canUploadClick: true,
                //是否可以提交作业(防止多次请求发布接口)
                studentName: '',
                //学生名字
                studentId: '',
                //学生Id
                firstArr: [],
                //本阶段附件
                secondArr: [],
                //下阶段附件
                thirdArr: [],
                //给家长作业附件
                targetName: '',
                //添加目标名称
                targetList: [],
                //选择目标列表
                targetArea: false,
                //添加目标区域
                imagedomain: imagedomain,
                loading:true,
                titleCheck:/[\ud800-\udbff][\udc00-\udfff]/
            }
        },
        mounted(){
            this.$util.jsBridgeCallBack('jsLeftAction',this.closeWebView);
            this.$nextTick(function () {
                this.getTarget();
                this.propsTitle();
                document.documentElement.scrollTop=1;
                document.body.scrollTop=1;
            });
        },
        components: {
            addModel,
            studentList
        },
        methods: {
            /**
             * @describe 选择下阶段目标
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            setTargetCheck(index){
                if (this.targetList[index].checked) {
                    this.$set(this.targetList[index], 'checked', false)
                } else {
                    this.$set(this.targetList[index], 'checked', true)
                }
            },
            /**
             * @describe jsBridge 时间选择器格式化
             *
             * @param    date 时间选择器返回时间戳
             *
             * @param    ifBegin 是否是开始时间选择器(true为开始，false为结束)
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            datePickerFormat(date, ifBegin,num){
                if (ifBegin) {
                    if(num==1){
                        this.beginTime = new Date(`${new Date(date).getFullYear()}/${new Date(date).getMonth() + 1}/${new Date(date).getDate()} 00:00:00`).getTime() / 1000;
                        if(this.beginTime>this.endTime){
                            this.endTime = new Date(`${new Date(this.beginTime*1000).getFullYear()}/${new Date(this.beginTime*1000).getMonth() + 1}/${new Date(this.beginTime*1000).getDate()} 23:59:59`).getTime() / 1000;
                        }
                        if(this.beginTime>=this.nextBeginTime){
                            this.nextBeginTime = new Date(`${new Date((this.beginTime+86400)*1000).getFullYear()}/${new Date((this.beginTime+86400)*1000).getMonth() + 1}/${new Date((this.beginTime+86400)*1000).getDate()} 00:00:00`).getTime() / 1000;
                        }
                        if(this.beginTime>this.nextEndTime){
                            this.nextEndTime = new Date(`${new Date((this.beginTime+86400)*1000).getFullYear()}/${new Date((this.beginTime+86400)*1000).getMonth() + 1}/${new Date((this.beginTime+86400)*1000).getDate()} 23:59:59`).getTime() / 1000;
                        }
                    }else if(num==2){
                        this.nextBeginTime = new Date(`${new Date(date).getFullYear()}/${new Date(date).getMonth() + 1}/${new Date(date).getDate()} 00:00:00`).getTime() / 1000;
                        if(this.nextBeginTime>this.nextEndTime){
                            this.nextEndTime = new Date(`${new Date(this.nextBeginTime*1000).getFullYear()}/${new Date(this.nextBeginTime*1000).getMonth() + 1}/${new Date(this.nextBeginTime*1000).getDate()} 23:59:59`).getTime() / 1000;
                        }
                    }
                } else {
                    if(num==1){
                        this.endTime = new Date(`${new Date(date).getFullYear()}/${new Date(date).getMonth() + 1}/${new Date(date).getDate()} 23:59:59`).getTime() / 1000;
                        if(this.endTime>this.nextBeginTime){
                            this.nextBeginTime = new Date(`${new Date((this.endTime+86400)*1000).getFullYear()}/${new Date((this.endTime+86400)*1000).getMonth() + 1}/${new Date((this.endTime+86400)*1000).getDate()} 00:00:00`).getTime() / 1000;
                        }
                        if(this.endTime>this.nextEndTime){
                            this.nextEndTime = new Date(`${new Date((this.endTime+86400)*1000).getFullYear()}/${new Date((this.endTime+86400)*1000).getMonth() + 1}/${new Date((this.endTime+86400)*1000).getDate()} 23:59:59`).getTime() / 1000;
                        }
                    }else if(num==2){
                        this.nextEndTime = new Date(`${new Date(date).getFullYear()}/${new Date(date).getMonth() + 1}/${new Date(date).getDate()} 23:59:59`).getTime() / 1000;
                    }
                }
            },
            /**
             * @describe jsBridge 时间选择器
             *
             * @param    start 开始时间
             *
             * @param    end 结束时间
             *
             * @param    ifBegin 是否是开始时间选择器(true为开始，false为结束)
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            getDatePicker(start, end,now,ifBegin,num){
                this.$util.JsBridge('getDatePicker', {
                    minDate: start,
                    maxDate: end,
                    nowDate:now,
                }, (res) => {
                    this.datePickerFormat(res, ifBegin,num)
                })
            },
            /**
             * @describe 打开添加目标区域
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            openTarget(ifOpen, save){
                this.targetArea = ifOpen;
                if (save) {
                    this.addTarget(this.targetName)
                }
                this.targetName = ''
            },
            /**
             * @describe 添加目标
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            addTarget(targetName){
                let param = {
                    tagName: targetName
                };
                targetName===''?
                this.$toast('请输入标签名称'):
                    api.addTarget(param).then(res => {
                        let {code, rs} = res;
                        if (code == 200) {
                            rs.checked=true;
                            this.targetList.unshift(rs);
                        }else{
                            this.$util.sendLog(1,'APP_GROWTH_NOTE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'成长手记',code:'APP_GROWTH_NOTE',path: '/app/growth/add',api:'addTarget',success:false,data:res}));
                        }
                    }).catch(()=>{
                        this.$util.sendLog(1,'APP_GROWTH_NOTE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'成长手记',code:'APP_GROWTH_NOTE',path: '/app/growth/add',api:'addTarget',success:false,data:'网络异常'}));
                    })
            },
            /**
             * @describe 删除目标
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            delTarget(targetTid, index){
                let param = {
                    targetTid: targetTid
                };
                this.$delete(this.targetList, index);
                api.delTarget(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {}else{
                        this.$util.sendLog(1,'APP_GROWTH_NOTE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'成长手记',code:'APP_GROWTH_NOTE',path: '/app/growth/add',api:'delTarget',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_GROWTH_NOTE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'成长手记',code:'APP_GROWTH_NOTE',path: '/app/growth/add',api:'delTarget',success:false,data:'网络异常'}));
                })
            },
            /**
             * @describe 获取目标
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            getTarget(){
                let param = {};
                api.getTarget(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        rs.map((e) => {
                            e.checked = false;
                        })
                        this.targetList = rs;
                    }else{
                        this.$util.sendLog(1,'APP_GROWTH_NOTE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'成长手记',code:'APP_GROWTH_NOTE',path: '/app/growth/add',api:'getTarget',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_GROWTH_NOTE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'成长手记',code:'APP_GROWTH_NOTE',path: '/app/growth/add',api:'getTarget',success:false,data:'网络异常'}));
                })
            },
            /**
             * @describe 选择星级
             *
             * @param    index选择的星级
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            changeStar(index){
                this.startIndexed = index;
            },
            /**
             * @describe 选择学员回调
             *
             * @param    saveList学员选择列表
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            addStudent(saveList, className, isAllCheck){
                this.loading=false;
                if (saveList && saveList.length > 0) {
                    saveList.forEach((el, index) => {
                        if (el.checked) {
                            this.studentName = el.studentName;
                            this.studentImg = el.photoUrl;
                            this.studentId = el.studentId;
                        }
                    });
                }
            },
            /**
             * @describe jsBridge 关闭webView
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            closeWebView(){
                this.$util.JsBridge('closeWebView', {}, () => {})
            },
            /**
             * @describe 显示选择学员列表
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            showStudent(){
                if(this.$refs.studentList.studentList&&this.$refs.studentList.studentList.length>0){
                    this.$refs.studentList.showStudent();
                }else if(this.loading){
                    //无学员弹窗
                    this.$noStudentToast('学员加载中 请稍后');
                }else{
                    this.$noStudentToast();
                }
            },
            /**
             * @describe jsBridge 传递title
             *
             * @date     2017-8-3
             *
             * @param    title 标题
             *
             * @author   langwenqi
             */
            propsTitle(){
                this.$util.JsBridge('propsTitle', {
                    title: '成长手记',
                }, (res) => {
                })
            },
            /**
             * @describe 删除附件通过id查询索引
             *
             * @date     2017-8-3
             *
             * @param    id 添加时对附件标记的id
             *
             * @author   langwenqi
             */
            picForEach(id){
                let allIndex = 0;
                this.uploadList.forEach((el, index) => {
                    if (el.id === id) {
                        allIndex = index;
                        return;
                    }
                });
                return allIndex;
            },

            /**
             * @describe 删除附件
             *
             * @date     2017-8-3
             *
             *  @param    arr 当前分数组
             *
             * @param    index 附件在分数组索引
             *
             * @param    id 添加时对附件标记的id
             *
             * @author   langwenqi
             */
            removeItem(id, index, arr){
                let allIndex = this.picForEach(id);
                this.$delete(arr, index);
                this.$delete(this.uploadList, allIndex);
                this.$util.JsBridge('removePicesItem', {
                    picItemIndex: allIndex
                }, (res) => {
                })
            },
            /**
             * @describe 客户端上传文件
             *
             * @date     2017-8-3
             *
             * @param    picItemCount 附件上传限制张数
             *
             * @param    type 附件上传类型
             *
             * @param    appType APP_MULTI_WORK
             *
             * @author   langwenqi
             */
            changeFile(type, num){
                //TODO:客户端上传文件
                let count;
                if(num==1){
                    count=this.firstArr
                }else if(num==2){
                    count=this.secondArr
                }else if(num==3){
                    count=this.thirdArr
                }
                if (9 - count.length > 0) {
                    this.$util.JsBridge('getPicesList', {
                        picItemCount: 9 - count.length,
                        showType: type,
                        appType: 'APP_GROWTH_NOTE'
                    }, (res) => {
                        this.changeFileCallBack(res, num);
                    })
                } else {
                    this.$toast('您最多只能上传9个附件');
                }
            },
            /**
             * @describe 客户端上传文件
             *
             * @date     2017-8-3
             *
             * @param    res 附件的key(类型Array)
             *
             * @author   langwenqi
             */
            changeFileCallBack(res, num){
                this.imgKeys = res;
                for (let i = 0; i < res.length; i++) {
                    this.id++;
                    this.getImgInfo(res[i], num, this.id)
                }
            },
            /**
             * @describe 通过key获取客户端文件
             *
             * @date     2017-8-3
             *
             * @param    rs 单个附件的key
             *
             * @author   langwenqi
             */
            getImgInfo(rs, num, id){
                this.$util.JsBridge('getImgInfo', {
                    fileKey: rs
                }, (res) => {
                    res.key = rs;
                    res.id = id;
                    if (res.datathumbnail && res.datathumbnail.indexOf('data:image/png;base64') == -1) {
                        res.datathumbnail = 'data:image/png;base64,' + res.datathumbnail;
                    }
                    res.imgUrl=rs;
                    res.type=res.datatype;
                    if(res.datatime){
                        res.time=res.datatime;
                    }
                    if (num == 1) {
                        this.firstArr.push(res);
                    } else if (num == 2) {
                        this.secondArr.push(res);
                    } else if (num == 3) {
                        this.thirdArr.push(res);
                    }
                    this.uploadList.push(res);
                })
            },
            showPicesSwiper(array,index){
                let arr=[];
                array.forEach((el)=>{
                    let newEl={from:1,type:el.type,imgUrl:el.imgUrl,time:el.time};
                    arr.push(newEl);
                });
                this.$util.JsBridge('showPicesSwiper', {
                    picesList: arr,
                    picesIndex: index
                }, (res) => {
                })
            },
            /**
             * @describe 检查是否选择目标
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            checkGoad(){
                let checkState = false;
                this.targetList.map((e) => {
                    if (e.checked) {
                        checkState = true
                    }
                });
                return checkState ? true : false
            },
            /**
             * @describe 检查发布参数
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            check(){
                if (!this.studentId) {
                    this.$toast('请选择学员');
                    return false
                }else if (this.title==='') {
                    this.$toast('请输入标题');
                    return false
                }else if(this.titleCheck.test(this.title)){
                    this.$toast('标题内容不能包含表情');
                    return false;
                } else if (this.endTime<this.beginTime) {
                    this.$toast('开始时间不能大于结束时间');
                    return false
                }else if (this.firstContent==='') {
                    this.$toast('请输入本阶段表现');
                    return false
                } else if (this.startIndexed == 'noStar') {
                    this.$toast('请对本阶段评分');
                    return false
                } else if (this.nextEndTime<this.nextBeginTime) {
                    this.$toast('开始时间不能大于结束时间');
                    return false
                }else if(this.nextBeginTime<this.endTime){
                    this.$toast('下阶段开始时间不能小于本阶段结束时间');
                    return false
                }
                return true
            },
            /**
             * @describe 发布成长手记
             *
             * @param    title手记标题
             *
             * @param    studentId学生id
             *
             * @param    thisStageDetail本阶段表现
             *
             * @param    thisStageBeginTime本阶段开始时间
             *
             * @param    thisStageEndTime本阶段结束时间
             *
             * @param    thisStageGrade本阶段星级
             *
             * @param    nextStageDetail下阶段表现
             *
             * @param    nextStageBeginTime下阶段开始时间
             *
             * @param    nextStageEndTime下阶段结束时间
             *
             * @param    suggest给家长意见
             *
             * @param    thisStagePices本阶段附件
             *
             * @param    nextStagePices下阶段附件
             *
             * @param    suggestPices家长意见附件
             *
             * @param    tagIds下阶段目标
             *
             * @date     2017-8-3
             *
             * @author   langwenqi
             */
            sendGrowth(){
                if (this.check()) {
                    if (this.canUploadClick) {
                        this.canUploadClick = false;
                        let thisStagePices = [];
                        let nextStagePices = [];
                        let suggestPices = [];
                        let tagIds = '';
                        this.targetList.forEach((el, index) => {
                            if (el.checked) {
                                tagIds = tagIds + el.tid + ','
                            }
                        });
                        tagIds = tagIds.slice(0, tagIds.length - 1);
                        let firstContent = this.$util.utf16toEntities(this.firstContent).replace(/\n|\r\n/g, "<br>").replace(/[ ]/g, "&nbsp;");
                        let secondContent = this.$util.utf16toEntities(this.secondContent).replace(/\n|\r\n/g, "<br>").replace(/[ ]/g, "&nbsp;");
                        let thirdContent = this.$util.utf16toEntities(this.thirdContent).replace(/\n|\r\n/g, "<br>").replace(/[ ]/g, "&nbsp;");
                        this.firstArr.forEach((el, index) => {
                            let obj={};
                            obj.imgUrl=el.key;
                            obj.type=el.datatype;
                            if(el.datatype==2){
                                obj.time=el.datatime;
                            }
                            thisStagePices.push(obj);
                        });
                        this.secondArr.forEach((el, index) => {
                            let obj={};
                            obj.imgUrl=el.key;
                            obj.type=el.datatype;
                            if(el.datatype==2){
                                obj.time=el.datatime;
                            }
                            nextStagePices.push(obj);
                        });
                        this.thirdArr.forEach((el, index) => {
                            let obj={};
                            obj.imgUrl=el.key;
                            obj.type=el.datatype;
                            if(el.datatype==2){
                                obj.time=el.datatime;
                            }
                            suggestPices.push(obj);
                        });
                        let params = {
                            title:this.title,
                            studentId: this.studentId,
                            thisStageDetail: firstContent,
                            thisStageBeginTime: this.beginTime,
                            thisStageEndTime: this.endTime,
                            thisStageGrade: this.startIndexed+1,
                            nextStageDetail: secondContent,
                            nextStageBeginTime: this.nextBeginTime,
                            nextStageEndTime: this.nextEndTime,
                            suggest: thirdContent,
                            thisStagePices: JSON.stringify(thisStagePices),
                            nextStagePices: JSON.stringify(nextStagePices),
                            suggestPices: JSON.stringify(suggestPices),
                            tagIds: tagIds
                        };
                        let response = api.sendGrowth(params);
                        response.then((res) => {
                            this.$toast(res.msg, true);
                            if (res.code === 200) {
                                this.$util.JsBridge('sendFinish', {
                                    taskTid: res.rs,
                                    appType: 'APP_GROWTH_NOTE',
                                    content: this.content,
                                    taskName: '成长手记',
                                    taskImageURL: this.domain + 'www/static/images/app_icon_v200/chengzhangshouji-3x.png'
                                }, () => {})
                            } else {
                                this.canUploadClick = true;
                                this.$util.sendLog(1,'APP_GROWTH_NOTE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'成长手记',code:'APP_GROWTH_NOTE',path: '/app/growth/add',api:'sendGrowth',success:false,data:res}));
                            }
                        }).catch(()=>{
                            this.canUploadClick = true;
                            this.$util.sendLog(1,'APP_GROWTH_NOTE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'成长手记',code:'APP_GROWTH_NOTE',path: '/app/growth/add',api:'sendGrowth',success:false,data:'网络异常'}));
                        })
                    } else {
                        this.$toast('上传中，请稍后');
                    }
                }
            }
        }
    }
</script>
<style scoped lang="scss">
    .play {
        height: 0.3rem;
        width: 0.3rem;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 11;
        background: url("../../images/play.png") no-repeat center center/contain;
    }
    ::-webkit-input-placeholder {
        font-size: 0.12rem;
        opacity: 0.5;
        color: #fff;
    }


    .container {
        width: 100%;
        height: 100%;
        background: #000;
        position: relative;
        .dataInfo{
        padding-bottom:1rem;
        }
    }
    .targetArea {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 111;
        .targetWrapper {
            position: relative;
            background: #0d0d0d;
            border-radius: 0.05rem;
            width: 3rem;
            height: 1.84rem;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            box-sizing: border-box;
            padding: 0.12rem;
            padding-top: 0.03rem;
            .closeBtn {
                position: absolute;
                top: 0.12rem;
                right: 0.07rem;
                height: 0.2rem;
                width: 0.2rem;
                background: url("../../images/closeBtn.png") no-repeat center center/0.1rem 0.1rem;
            }
            .targetName {
                padding-top: 0.14rem;
            }
            .targetInput {
                color: #fff;
                display: block;
                height: 0.3rem;
                width: 100%;
                background: transparent;
            }
            .targetLine {
                width: 100%;
                height: 0.5px;
                background: #fff;
                opacity: 0.2;


            }
            .targetFont {
                padding-top: 0.04rem;
            }
            .targetBtn {
                background: rgba(255, 255, 255, 0.12);
                border-radius: 0.06rem;
                width: 1.81rem;
                height: 0.36rem;
                margin: 0 auto;
                margin-top: 0.18rem;
            }
        }
    }

    .titleP {
        padding: 0.12rem 0.12rem 0.1rem 0.12rem;
    }

    .blackBorder {
        opacity: 0.3;
        background: #000000;
        height: 0.12rem;
    }

    .goalList {
        padding: 0 0.12rem 0.12rem 0.12rem;
        overflow: hidden;

        .goalItem {
            padding: 0 0.1rem;
            height: 0.26rem;
            color: #fff;
            border: 0.5px solid rgba(255, 255, 255, 0.5);
            border-radius: 0.06rem;
            margin-top: 0.08rem;
            margin-right: 0.08rem;
            position: relative;
            float: left;
            .goalContent {
                opacity: 0.5;
            }

            .delGoal {
                height: 0.18rem;
                width: 0.18rem;
                position: absolute;
                right: -0.09rem;
                top: -0.09rem;
                background: url("../../images/delBlack.png") no-repeat center center/contain;
            }
        }
        .goalContentCheck {
            opacity: 1;
            background: rgba(0, 0, 0, 0.5);
            .goalContent {
                opacity: 1;
            }
        }
        .addGoal {
            width: 0.25rem;
            height: 0.25rem;
            float: left;
            margin-top: 0.08rem;
            margin-right: 0.08rem;
            background: url("../../images/addTarget.png") no-repeat center center/contain;
        }
    }

    .starArea {
        height: 0.39rem;
        .starList {
            padding-left: 0.12rem;
            .starItem {
                height: 0.16rem;
                width: 0.16rem;
                margin-right: 0.1rem;
                background: url("../../images/dashStar.png") no-repeat center center/contain;
            }
            .starItemed {
                background: url("../../images/yellowStar.png") no-repeat center center/contain;
            }
        }
    }

    .addArea {
        position: relative;
        width: 3.51rem;
        margin: 0 auto;
        box-sizing: border-box;
        /*文本输入框*/
        textarea {
            background: transparent;
            width: 100%;
            font-family: PingFangSC-Regular;
            font-size: 0.13rem;
            color: #cccccc;
            height: 0.51rem;
            outline: none;
            margin-bottom: 0.1rem;
            line-height: 0.2rem;
            box-sizing: content-box;
        }
        /*附件区域*/
        .imgList {
            width: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            overflow-scrolling: touch;
            white-space: nowrap;
            padding-bottom: 0.2rem;
            .imgItem {
                height: 0.68rem;
                width: 0.68rem;
                overflow: hidden;
                margin-right: 0.06rem;
                position: relative;
                background: #d8d8d8;
                img {
                    height: 100%;
                    width: 100%;
                    -o-object-fit: cover;
                    object-fit: cover;
                }
                .deleteBtn {
                    position: absolute;
                    z-index: 1;
                    height: 0.15rem;
                    width: 0.15rem;
                    background: rgba(0, 0, 0, 0.5);
                    top: 0.02rem;
                    right: 0.02rem;
                    background: url("../../images/delete.png") no-repeat center center/contain;
                }
            }
        }
        /*添加附件按钮*/
        .btnArea {
            padding-bottom: 0.12rem;
            box-sizing: border-box;
            .leftArea {
                .leftAreaInner{
                    margin-right: 0.24rem;
                    .imgBtn {
                        background: url("../../images/addPic.png") no-repeat center center/contain;
                        width: 0.18rem;
                        height: 0.18rem;
                        position: relative;
                    }
                    .audioBtn {
                        width: 0.18rem;
                        height: 0.18rem;
                        background: url("../../images/addAudio.png") no-repeat center center/contain;
                    }
                    .videoBtn {
                        width: 0.18rem;
                        height: 0.17rem;
                        position: relative;
                        background: url("../../images/addVideo.png") no-repeat center center/contain;
                    }
                    .leftAreaFont{
                        font-size: 0.09rem;
                    }
                }

            }
            .rightArea {
                opacity: 0.4;
            }
        }

    }

    .hasStudent {
        padding-top: 0.12rem !important;
    }

    .selectStudent {
        padding: 0.28rem 0.12rem 0.1rem 0.12rem;
        .title{
            color:#fff;
            height: 100%;
            background: transparent;
        }
        .studentWrapper {
            margin-right: 0.07rem;
            height: 0.34rem;
            width: 0.34rem;
            border-radius: 100%;
            overflow: hidden;
            img {
                height: 100%;
                width: 100%;
                -o-object-fit: cover;
                object-fit: cover;
            }
        }
        .studentName {
            padding-right: 0.07rem;
        }
        .rightIcon {
            height: 0.1rem;
            width: 0.1rem;
            background: url("../../images/iconMore.png") no-repeat right center/contain;
        }
    }

    .bottomLine {
        width: 3.5rem;
        height: 0.5px;
        margin: 0 auto;
        opacity: 0.3;
        background: #f2f4fa;

    }

    .inputModel {
        height: 1.83rem;
        width: 100%;
        padding-bottom: 0.13rem;
        border-bottom: 0.12rem solid rgba(0, 0, 0, 0.5);
    }

    .uploadNum {
        opacity: 0.5;
        margin-left: 0.08rem;
    }

</style>
